<template>
  <div>
    <div id="comboTree" dir="ltr">
      <treeSelect
        ref="selectTreeRef"
        v-bind="$attrs"
        :model.sync="childModel"
        :config="config"
        :modelKey="modelKey"
        :fromSource="fromSource"
        :which="which"
        :formConfigData="formConfigDefault"
        @selectTreeOpenCallback="openTreeSelect"
      ></treeSelect>
    </div>
    <!--调用弹框-->
    <vxeDialog
      ref="vxeDialog"
      :title="modelKey"
      :isShowWin.sync="treeDialog"
      width="400px"
      height="600px"
    >
      <treeSelect
        ref="dialogTreeRef"
        slot="dialogContent"
        v-bind="$attrs"
        :model.sync="childModel"
        :config="config"
        :modelKey="modelKey"
        :fromSource="fromSource"
        :which="which"
        :formConfigData="formConfigDialogDefault"
        @changeCallback="selectDialogTreeChange"
      ></treeSelect>
    </vxeDialog>
  </div>
</template>

<script>
import vxeDialog from "@/components/vxeDialog/vxeDialog.vue";
import treeSelect from "@/components/vueForm/mySelectTree.vue";
import XEUtils from "xe-utils";
export default {
  components: {
    vxeDialog,
    treeSelect,
  },
  props: {
    
    model: {
      // 当前组件绑定值
      type: [String, Number, Boolean, Array],
      require: true,
    },
    modelKey: {
      //当前绑定值key，可以用于formData中获取到当前组件渲染配置items
      type: String,
      default() {
        return "";
      },
    },
    fromSource: {
      //用于formData中获取到当前组件渲染配置items
      type: [Array, String],
      default() {
        return "";
      },
    },
    which: {
      //第几组下拉/弹框树
      type: [String, Number],
      default() {
        return 1;
      },
    },
    // disabled: {
    //   // 当前组件是否禁用
    //   type: Boolean,
    //   default() {
    //     return false;
    //   },
    // },
    config: {
      //私有配置数据
      type: [String, Object],
      require: true,
    },
    formConfigData: {
      //配置数据
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      childModel: null,
      treeDialog: false,
      configDialogDefault: {
        alwaysOpen: true,
      },
      configDefault: {
        isDialog: false,
      },
      formConfigDefault: {},
      formConfigDialogDefault: {},
    };
  },
  created() {
    //多选时可能存在多个键值
    if (this.configDefault.multiple) {
      this.childModel = this.model && this.model.length > 0 ? this.model : [];
    } else {
      this.childModel = this.model || this.model == 0 ? this.model : null;
    }
  },
  mounted() {},
  updated() {
    let comboTree = $("#comboTree .vue-treeselect__menu");
    if (this.treeDialog && comboTree.length) {
      comboTree.hide();
    }
  },
  watch: {
    childModel(val, oldVal) {
      if (
        (this.configDefault.multiple && !XEUtils.isEqual(val, oldVal)) ||
        (!this.configDefault.multiple && val !== oldVal)
      ) {
        this.$emit("update:model", val);
      }
    },
    model(val, oldVal) {
      if (
        ((this.configDefault.multiple && !XEUtils.isEqual(val, this.childModel)) ||
          (!this.configDefault.multiple && val !== this.childModel)) &&
        val
      ) {
        this.childModel = val;
      }
    },
    formConfigData: {
      handler(newVal) {
        let formConfigObj = newVal
          ? newVal[this.fromSource] || newVal[this.modelKey]
          : {};
        let publicConfigObj = newVal ? newVal["publicAttr"] : {};
        let cfg =
          this.config && XEUtils.isString(this.config)
            ? XEUtils.toStringJSON(this.config)
            : this.config || {};
        this.configDefault = XEUtils.merge(
          this.configDefault,
          publicConfigObj,
          cfg,
          formConfigObj
        );
        this.configDialogDefault = XEUtils.merge(
          this.configDialogDefault,
          publicConfigObj,
          cfg,
          formConfigObj
        );

        this.formConfigDefault[this.modelKey] = XEUtils.clone(
          this.configDefault
        );

        this.formConfigDialogDefault[this.modelKey] = XEUtils.clone(
          this.configDialogDefault
        );
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    openTreeSelect() {
      // if (
      //   this.configDefault.isDialog &&
      //   event.currentTarget &&
      //   event.currentTarget.className !=
      //     "vue-treeselect__control-arrow-container"
      // ) {
      //   this.treeDialog = true;
      // }
    },
    selectDialogTreeChange(key, val) {
      if (key == this.modelKey + "_" + this.which) {
        this.childModel = val;
      }
    },
  },
};
</script>
